<template>
  <div class="userHead">
    <a class="logo left">
      <img src="../../static/images/logo.png" alt="">
    </a>
    <div class="right">
      <img src="../../static/images/top-1.png" alt="">
      <span class="welcome">您好，{{user_name}}  欢迎回来！</span>
      <router-link :to="{path:'/userSetting'}"><span class="userCenter">个人中心</span></router-link>
      <span class="exit" @click.stop="exitFn">退出</span>
    </div>
  </div>
</template>
<script>
  import {mapState,mapMutations} from 'vuex'
export default({
  data(){
      return {
        userName:'',
      }
  },
  computed:{
    ...mapState({
      isExit:state=>state.app.loginState.isExit||sessionStorage.getItem('isExit'),
      user_id:state=>state.app.loginState.user_id||sessionStorage.getItem('user_id'),
      token:state=>state.app.loginState.token||sessionStorage.getItem('token'),
      user_name:state=>state.app.loginState.user_name||sessionStorage.getItem('user_name')
    })
  },
  methods:{
    ...mapMutations(['saveUid','changeLoginStatus']),
    exitFn(){
      this.axios.get('/api/v1/accout/userlogin')
        .then((res)=>{
          this.changeLoginStatus({
            isExit:0
          });
          this.saveUid({
            user_id:'',
            token:'',
            user_name:''
          })
          localStorage.setItem('user_id','')
          localStorage.setItem('user_name','')
          localStorage.setItem('token','');
          this.$router.push({
            path:'/'
          });
        })
    }
  },
  mounted(){
      this.userName =this.user_name
  }
})
</script>

<style></style>
